<template>
  <div class="inventory-summary">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="summary-card">
          <div slot="header" class="card-header">
            <span>今日概况</span>
          </div>
          <div class="inventory-button">
            <span class="stock-in-button">入库</span>
          </div>
          <div class="outentory-button">
            <span class="stock-in-button">出库</span>
          </div>
          <el-row>
            <el-col :span="10">
              <div> <span class="highlight">单据数量:</span> {{ todayData.orderCount }}</div>
            </el-col>
            <el-col :span="10">
              <div> <span class="highlight">单据数量:</span> {{ todayData.otherData }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <div> <span class="highlight">入库数量:</span> {{ todayData.stockInCount }}</div>
            </el-col>
            <el-col :span="10">
              <div><span class="highlight">出库数量:</span> {{ todayData.stockOutCount }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <div><span class="highlight">入库金额:</span> ¥{{ todayData.stockInAmount }}</div>
            </el-col>
            <el-col :span="10">
              <div> <span class="highlight">出库金额:</span> ¥{{ todayData.stockOutAmount }}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="summary-card">
          <div slot="header" class="card-header">
            <span>昨日概况</span>
          </div>
          <div class="inventory-button">
            <span class="stock-in-button">入库</span>
          </div>
          <div class="outentory-button">
            <span class="stock-in-button">出库</span>
          </div>
          <el-row>
            <el-col :span="10">
              <div><span class="highlight">单据数量:</span> {{ todayData.orderCount }}</div>
            </el-col>
            <el-col :span="10">
              <div><span class="highlight">单据数量:</span> {{ todayData.otherData }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <div><span class="highlight">入库数量:</span> {{ todayData.stockInCount }}</div>
            </el-col>
            <el-col :span="10">
              <div><span class="highlight">出库数量:</span> {{ todayData.stockOutCount }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <div><span class="highlight">入库金额:</span> ¥{{ todayData.stockInAmount }}</div>
            </el-col>
            <el-col :span="10">
              <div><span class="highlight">出库金额:</span> ¥{{ todayData.stockOutAmount }}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--饼图-->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="summary-card">
          <div slot="header" class="card-header">
            <span>库存数量占比</span>
          </div>
          <div class="echart-container" ref="inventoryChart"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card id="money-card" class="summary-card">
          <div slot="header" class="card-header">
            <span>库存金额占比</span>
          </div>
          <div class="echart-container" ref="moneyChart"></div>
        </el-card>
      </el-col>
    </el-row>

  
  <div class="inventory-stats">
    <el-card>
      <div slot="header" class="store">
        <span>入库统计</span>
      </div>
      <el-radio-group v-model="selectedDateRange" class="storeClass">
        <el-radio-button label="最近7天">最近7天</el-radio-button>
        <el-radio-button label="最近30天">最近30天</el-radio-button>
        <el-radio-button label="最近一年">最近一年</el-radio-button>
      </el-radio-group>
      <div ref="storeChart" class="chart"></div>
    </el-card>
  </div>

  <div class="inventory-stats">
    <el-card>
      <div slot="header" class="store">
        <span>出库统计</span>
      </div>
      <el-radio-group v-model="selectedDateRange" class="storeClass">
        <el-radio-button label="最近7天">最近7天</el-radio-button>
        <el-radio-button label="最近30天">最近30天</el-radio-button>
        <el-radio-button label="最近一年">最近一年</el-radio-button>
      </el-radio-group>
      <div ref="outboundChart" class="chart"></div>
    </el-card>
  </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'PieChartComponent',
  data() {
    return {
      todayData: {
        orderCount: 52,
        stockInCount: 602,
        stockInAmount: 2000.00,
        stockOutCount: 602,
        stockOutAmount: 2000.00,
        otherData: 52
      },
      yesterdayData: {
        orderCount: 52,
        stockInCount: 602,
        stockInAmount: 2000.00,
        stockOutCount: 602,
        stockOutAmount: 2000.00,
        otherData: 52
      },
    };
  },
  mounted() {
    this.inventoryInitChart();
    this.moneyInitChart();
    this.storeInitChart();
    this.outboundInitChart();
  },
  methods: {
    inventoryInitChart() {
      const chartDom = this.$refs.inventoryChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          itemGap: 20,
          itemWidth: 20,
          itemHeight: 14,
          orient: 'vertical',
          right: '0%',
          top: 'center',
          textStyle: {
            color: '#666'
          }
        },
        series: [
          {
            name: '库存',
            type: 'pie',
            radius: ['35%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 17,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 567, name: '仓库一', itemStyle: { color: '#36A2EB' } },
              { value: 678, name: '仓库二', itemStyle: { color: '#cc9be8' } },
              { value: 456, name: '仓库三', itemStyle: { color: '#FFCE56' } },
              { value: 789, name: '仓库四', itemStyle: { color: '#eccd8a' } },
              { value: 567, name: '仓库五', itemStyle: { color: '#8970c7' } },
              { value: 345, name: '仓库六', itemStyle: { color: '#f38282' } },
              { value: 678, name: '仓库七', itemStyle: { color: '#5fd5cf' } }
            ]
          }
        ],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '5235\n总库存',
            textAlign: 'center',
            fill: '#000',
            fontSize: 20
          }
        }
      };
      myChart.setOption(option);
    },
    moneyInitChart() {
      const chartDom = this.$refs.moneyChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          itemGap: 20,
          itemWidth: 20,
          itemHeight: 14,
          orient: 'vertical',
          right: '0%',
          top: 'center',
          textStyle: {
            color: '#666'
          }
        },
        series: [
          {
            name: '金额',
            type: 'pie',
            radius: ['35%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 17,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 567, name: '仓库一', itemStyle: { color: '#36A2EB' } },
              { value: 678, name: '仓库二', itemStyle: { color: '#cc9be8' } },
              { value: 456, name: '仓库三', itemStyle: { color: '#FFCE56' } },
              { value: 789, name: '仓库四', itemStyle: { color: '#eccd8a' } },
              { value: 567, name: '仓库五', itemStyle: { color: '#8970c7' } },
              { value: 345, name: '仓库六', itemStyle: { color: '#f38282' } },
              { value: 678, name: '仓库七', itemStyle: { color: '#5fd5cf' } }
            ]
          }
        ],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '5235\n总金额',
            textAlign: 'center',
            fill: '#000',
            fontSize: 20
          }
        }
      };
      myChart.setOption(option);
    },
    storeInitChart() {
       const chartDom = this.$refs.storeChart;
       const myChart = echarts.init(chartDom);
       const option = {
        tooltip: {},
        legend: {
          data: ['数量', '金额']
        },
        xAxis: {
          type: 'category',
          data: ['2023-08-01', '2023-08-02', '2023-08-03', '2023-08-04', '2023-08-05', '2023-08-06', '2023-08-07']
        },
        yAxis: [
          {
            type: 'value',
            name: '数量',
            min: 0,
            max: 200,
            position: 'left'
          },
          {
            type: 'value',
            name: '金额',
            min: 0,
            max: 1200,
            position: 'right'
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [20, 100, 150, 100, 60, 120, 110]
          },
          {
            name: '金额',
            type: 'line',
            yAxisIndex: 1,
            data: [200, 600, 1100, 700, 300, 900, 800]
          }
        ]
      };
      myChart.setOption(option);
    },
    outboundInitChart() {
       const chartDom = this.$refs.outboundChart;
       const myChart = echarts.init(chartDom);
       const option = {
        tooltip: {},
        legend: {
          data: ['数量', '金额']
        },
        xAxis: {
          type: 'category',
          data: ['2023-08-01', '2023-08-02', '2023-08-03', '2023-08-04', '2023-08-05', '2023-08-06', '2023-08-07']
        },
        yAxis: [
          {
            type: 'value',
            name: '数量',
            min: 0,
            max: 200,
            position: 'left'
          },
          {
            type: 'value',
            name: '金额',
            min: 0,
            max: 1200,
            position: 'right'
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [20, 100, 150, 100, 60, 120, 110],
            itemStyle: { // 柱状颜色和圆角
            color: '#f2bf24',
            },
          },
          {
            name: '金额',
            type: 'line',
            yAxisIndex: 1,
            data: [200, 600, 1100, 700, 300, 900, 800]
          }
        ]
      };
      myChart.setOption(option);
    },
    // 系统消息
    moreMessages() {
      // 跳转到更多消息的页面或显示更多消息的弹窗
      console.log('显示更多消息');
    }
  }
};
</script>

<style>
.inventory-summary {
  padding: 20px;
}
.summary-card {
  margin-bottom: 20px;
}
.card-header {
  font-weight: bold;
  background-color: #f5f7fa;
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
}
.highlight {
  color: darkgray;
  font-weight: bold;
  margin-left: 10px;
}
.inventory-button {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #2ec16e;
  border-radius: 4px;
  color: #2ec16e;
  background-color: rgba(41, 172, 63, 0.3);
  margin-bottom: 10px;
}
.outentory-button {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #f2bf24;
  border-radius: 4px;
  color: #f2bf24;
  background-color: rgba(231, 187, 42, 0.3);
  margin-bottom: 10px;
  margin-left: 300px;
}
.el-icon-document, .el-icon-goods, .el-icon-money, .el-icon-truck, .el-icon-sold-out, .el-icon-tickets {
  margin-left: 10px;
  color: #409eff;
}
.echart-container {
  width: 600px;
  height: 300px;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-left: -70px;
}
.inventory-stats {
  width: 1670px;
  /* padding: 5px; */
  margin-bottom: 20px;
}
.chart {
  width: 100%;
  height: 400px; 
}
.storeClass{
  margin-left: 1300px;
}
.store{
  font-weight: bold;
}
</style>